<script>
export default {
	data() {
		return {
			weeks: ['日', '一', '二', '三', '四', '五', '六'],
			// 天数
			days: 0,
			firstDateDay: null,
			nowYear: null,
			nowMonth: null,
			nowDay: null,
		};
	},

	created() {
		const now = new Date();

		// 计算本月一号是周几
		this.firstDateDay = new Date(now.getFullYear(), now.getMonth(), 1).getDay();

		// 计算本月有多少天
		const daysFunc = () => {
			this.days = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
		};
		daysFunc();

		// 实时计算当前页面显示的年份
		this.nowYear = now.getFullYear();
		// 实时计算当前页面显示的月份
		this.nowMonth = now.getMonth() + 1;
		// 实时计算当前页面显示的日期
		this.nowDay = now.getDate();
	},
};
</script>

<template>
	<div class="container">
		<div class="dateTitle">
			<div class="Nowdata">{{ nowYear }}年{{ nowMonth }}月{{ nowDay }}日</div>
			<div class="PreOrNext">
				<button class="button">上个月</button>
				<button class="button">下个月</button>
			</div>
		</div>

		<div class="flex">
			<div class="item" v-for="item in weeks" :key="item">
				{{ '周' + item }}
			</div>
		</div>

		<div class="flex">
			<div class="item" v-for="item in firstDateDay" :key="item + days"></div>
			<div
				class="item"
				v-for="item in days"
				:key="item"
				:class="item === nowDay ? 'nowDate' : null"
			>
				{{ item }}
			</div>
		</div>
	</div>
</template>

<style scoped>
.container {
	background-color: royalblue;
	height: auto;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}

.item {
	width: calc(100% / 7);
	height: 80px;
	color: white;
	text-align: center;
	line-height: 80px;
}

.dateTitle {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-items: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 0 40px;
}

.PreOrNext {
	flex: 1;
	text-align: right;
}

.Nowdata {
	color: white;
	font-size: 25px;
	flex: 1;
	text-align: center;
}
.nowDate {
	color: aqua;
	border: solid 2px red;
}

.button {
	border-radius: 10px;
	padding: 10px;
	margin: 10px;
	border: unset;
	background-color: #208bff;
	color: white;
}
.button:hover {
	background-color: #2f5278;
	cursor: pointer;
}
</style>
